<link rel="stylesheet" href="/assets/home/css/index.css" />

<div class="mui-content">
  <div class="swiper mySwiper wow fadeIn">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="">
          <img src="/assets/home/images/video5.png">
          <p class="mui-slider-title">Javascript从零开始</p>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="">
          <img src="/assets/home/images/video3.png">
          <p class="mui-slider-title">Javascript从零开始1111</p>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="">
          <img src="/assets/home/images/video2.png">
          <p class="mui-slider-title">Javascript从零开始222</p>
        </a>
      </div>
    </div>
    <div class="swiper-pagination" style="text-align: right;"></div>
  </div>
</div>

<div class="menulist">
  <div class="item wow bounceIn" data-wow-delay="100ms">
    <a href="live.html">
      <img src="/assets/home/images/live.png" alt="">
      <div class="name">课程直播</div>
    </a>
  </div>

  <div class="item wow bounceIn" data-wow-delay="200ms">
    <a href="comment_list.html">
      <img src="/assets/home/images/comment.png" alt="">
      <div class="name">学员评论</div>
    </a>
  </div>

  <div class="item wow bounceIn" data-wow-delay="300ms">
    <a href="ranking.html">
      <img src="/assets/home/images/ranking.png" alt="">
      <div class="name">课程榜单</div>
    </a>
  </div>

  <div class="item wow bounceIn" data-wow-delay="400ms">
    <a href="coupon_list.html">
      <img src="/assets/home/images/coupon.png" alt="">
      <div class="name">领取优惠</div>
    </a>
  </div>
</div>

<div class="list">
  <div class="title wow">精选课程</div>
  <ul>
    <li class="wow" data-wow-delay="100ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video6.png">
        </div>
        <div class="mui-media-body">Java基础视频</div>
        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="120ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video2.png">
        </div>

        <div class="mui-media-body">Java基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="140ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video.jpg">
        </div>
        <div class="mui-media-body">Java基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="160ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video2.png">
        </div>
        <div class="mui-media-body">.Net基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="180ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video6.png">
        </div>
        <div class="mui-media-body">Java基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="200ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video2.png">
        </div>
        <div class="mui-media-body">.Net基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="220ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video.jpg">
        </div>
        <div class="mui-media-body">Java基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="240ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video2.png">
        </div>
        <div class="mui-media-body">.Net基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="260ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video.jpg">
        </div>
        <div class="mui-media-body">.Net基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
    <li class="wow" data-wow-delay="280ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/video2.png">
        </div>
        <div class="mui-media-body">.Net基础视频</div>

        <div class="info">
          <div class="price">￥599</div>
          <div class="like">
            500
            <img src="/assets/home/images/thumbs-up.png" alt="">
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

<!-- 精选名师 -->
<div class="list teacher">
  <div class="title wow">精选名师</div>
  <ul>
    <li class="wow" data-wow-delay="100ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/avatar.jpg">
        </div>
        <div class="mui-media-body">demo老师</div>
        <div class="info">
          <div class="num">课程：7</div>
          <div class="like">
            500
            <img src="/assets/home/images/like.png" alt="">
          </div>
        </div>
      </a>
    </li>

    <li class="wow" data-wow-delay="120ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/avatar.jpg">
        </div>
        <div class="mui-media-body">demo老师</div>
        <div class="info">
          <div class="num">课程：7</div>
          <div class="like">
            500
            <img src="/assets/home/images/like.png" alt="">
          </div>
        </div>
      </a>
    </li>

    <li class="wow" data-wow-delay="140ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/avatar.jpg">
        </div>
        <div class="mui-media-body">demo老师</div>
        <div class="info">
          <div class="num">课程：7</div>
          <div class="like">
            500
            <img src="/assets/home/images/like.png" alt="">
          </div>
        </div>
      </a>
    </li>

    <li class="wow" data-wow-delay="160ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/avatar.jpg">
        </div>
        <div class="mui-media-body">demo老师</div>
        <div class="info">
          <div class="num">课程：7</div>
          <div class="like">
            500
            <img src="/assets/home/images/like.png" alt="">
          </div>
        </div>
      </a>
    </li>

    <li class="wow" data-wow-delay="180ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/avatar.jpg">
        </div>
        <div class="mui-media-body">demo老师</div>
        <div class="info">
          <div class="num">课程：7</div>
          <div class="like">
            500
            <img src="/assets/home/images/like.png" alt="">
          </div>
        </div>
      </a>
    </li>

    <li class="wow" data-wow-delay="200ms">
      <a href="details.html">
        <div class="imgs">
          <img class="mui-media-object" src="/assets/home/images/avatar.jpg">
        </div>
        <div class="mui-media-body">demo老师</div>
        <div class="info">
          <div class="num">课程：7</div>
          <div class="like">
            500
            <img src="/assets/home/images/like.png" alt="">
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>


<script>
  var swiper = new Swiper(".mySwiper", {
    pagination: {
      el: ".swiper-pagination",
    },
  });

  new WOW({
    boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
    animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
    offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
    mobile: true,       // 是否在移动设备上执行动画(默认为true)
    live: true,       // 异步加载的内容是否有效(默认为true)
    scrollContainer: null // 可选滚动容器选择器，否则使用窗口
  }).init();
</script>